<div class="home">
  <div class="home-main">
    <div class="top">
      <div class="topTitle">
        <div class="title">
          <div>{{ this.i18nValues['topText'][0] }}</div>
          <div>{{ this.i18nValues['topText'][1] }}</div>
        </div>
        <div>
          <div>{{ this.i18nValues['topText'][2] }}</div>
          <div>{{ this.i18nValues['topText'][3] }}</div>
          <div style="margin-bottom: 40px">
            {{ this.i18nValues['topText'][4] }}
          </div>
        </div>
      </div>
      <div class="hot">
        <div>
          <ul>
            <li *ngFor="let item of topCollectionArr" (click)="changeItem(item)" (mouseover)="mouseEnter()"
              (mouseout)="mouseLeave()">
              <ng-container *ngIf="
                  currentItem?.collectionIndex === item.collectionIndex 
                  && currentItem?.subCollectionIndex === item.subCollectionIndex;
                  else elseTemplate
                ">
                <img [src]="item.url" style="opacity: 0.8" alt="" />

                <d-progress [percentage]="progressNum" [strokeWidth]="2" [showContent]="false" style="
                    position: absolute;
                    bottom: 15px;
                    width: 88%;
                    margin: 0 10px;
                  ">
                </d-progress>
              </ng-container>
              <ng-template #elseTemplate>
                <img [src]="item.url" alt="" />
              </ng-template>
            </li>
          </ul>
        </div>
        <div class="hot-item" (mouseover)="mouseEnter()" (mouseout)="mouseLeave()">
          <img [src]="currentItem?.url" alt="" />
          <div class="first-item">
            <div class="info">
              <div class="info-top">
                <span>{{ currentItem?.collectionName }}&emsp;·&emsp;{{currentItem?.pictureName}}</span>
              </div>
              <div class="info-middle">
                <span>{{ currentItem?.description }}</span>
              </div>
              <div class="issuer">
                <div>
                  <img src="../../../assets/img/default.png" style="height: 32px; width: 32px; margin-right: 14px"
                    alt="" />
                  <span>{{ currentItem?.issuer }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="middle">
      <div class="middle-content">
        <div class="middle-title">
          <span>限时抢购</span>
        </div>
        <div class="middle-tabs">
          <div class="middle-tabs-content">
            <hr />
            <ul>
              <li *ngFor="let item of tabsLists">
                <span (click)="changeTab(item)" [ngClass]="{ 'tab-active': item.id === currentTab }">{{ item.text
                  }}</span>
              </li>
            </ul>
            <div>
              <span (click)="toPage()">查看更多 &gt;</span>
            </div>
          </div>
        </div>

        <div class="middle-list">
          <app-collection-item *ngFor="let item of collectionList" [collection]="item"
            (apply)="openPublishDialog($event)" (getList)="getList()"></app-collection-item>
        </div>
      </div>
    </div>
  </div>
</div>
